<template>
  <view class="container">
    <view class="rule_title">
      <text class="yz-iconfont yz-dunpai"></text>
      接单规则
    </view>
    <view class="rule_cont">
      <text class="yz-iconfont yz-2"></text>
      {{common.customConfig.accept_job_rule}}
    </view>
    <view class="fee_box">
      <view class="item">
        <view class="title">需付接单费用：</view>
        <view class="fee">
          <text>￥</text>{{deposit_fee}}元
        </view>
      </view>
    </view>

    <view class="payment-btn" @tap="handleShowDiaLog">
      <view class="payment-text">提交支付</view>
    </view>

    <payPop ref='payPop' @createOrder="createOrder"></payPop>
  </view>
</template>

<script>
import { mapState } from 'vuex';
import Pay from '@/utils/pay';
import payPop from '@/components/paypop/index.vue';
import xyTitle from "@/components/xy-title/index.vue";
export default {
  components: {
    xyTitle,
    payPop
  },
  data() {
    return {
      job_id : '',
      deposit_fee : '',
      payfee: '',
    };
  },
  computed: {
    ...mapState(['common','user'])
  },
  async onLoad(options) {
    if (options?.id) {
      this.job_id = options.id;
    }
    this.payfee = this.deposit_fee = this.common.customConfig.accept_job_deposit;
  },
  methods: {


    //创建订单
    createOrder(pay_type){
      var that = this;
      // 提交订单
      this.$api.postBase({
        url: '/staff_order/add',
        data: {
          job_id: this.job_id,
          pay_type:pay_type,
        },
        loadingTip: '提交订单中...',
        success: res => {
          //发起支付
          var pay = new Pay(pay_type, res, 'staff');
          pay.payMehod().then((res)=>{
            that.disabled = false;
            that.$refs.payPop.disabled = false;
            that.$xyfun.to('/pages/job/my_accept_job?status=1');
            // pay.payResult(res);
          },(res)=>{
            that.$refs.payPop.disabled = false;
            that.$xyfun.to('/pages/job/my_accept_job?status=1');
          });
        }
      });
    },

    handleShowDiaLog(){
      this.$refs.payPop.showDiaLog(this.payfee)
    },

  }
}
</script>

<style lang="scss">
.container{
  min-height: 100vh;
  overflow: hidden;
  background: #ececec;
}
.rule_title{
  margin: 50rpx;
  display: flex;
  text{
    display: inline-block;
    width: 50rpx;
    height: 50rpx;
    border-radius: 25rpx;
    text-align: center;
    line-height: 50rpx;
    font-size: 30rpx;
    color: #fff;
    background: #00a0ea;
    margin-right: 20rpx;
  }
}
.rule_cont{
  margin: 50rpx;
  background: #eff7f9;
  padding: 20rpx;
  font-size: 28rpx;
  border-radius: 10rpx;
  text{
    color: #f3a215;
    margin-right: 20rpx;
    font-size: 34rpx;
  }
}
.fee_box{
  background: #fff;
  margin: 50rpx;
  border-radius: 10rpx;
  .item{
    display: flex;
    justify-content: space-between;
    padding: 20rpx;
    align-items: center;
    .input{
      display: flex;
      align-items: center;
      input{
        border: 1rpx solid #999;
        text-align: right;
        height: 80rpx;
        width: 200rpx;
        border-radius: 10rpx;
        padding-right: 10px;
        margin-right: 20rpx;
      }
    }
    .fee{
      color: #e17372;
    }
  }
}

.payment-btn {
  margin: 0 auto;
  left: 0;
  right: 0;
  position: fixed;
  bottom: 100rpx;
  background-color: #ffcc80;
  color: #424242;
  height: 100rpx;
  width: 600rpx;
  border-radius: 50rpx;
  font-size: 36rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  .payment-text {
    font-size: 40rpx;
    font-weight: bold;
  }
}
</style>
